﻿@page "/scheduler/adaptive-rows"

@using Syncfusion.Blazor.Schedule
@using Syncfusion.Blazor.Buttons
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This example showcases how the work-cells of Scheduler auto-adjust its height based on the number of appointments present in those time ranges. </p>
</SampleDescription>
<ActionDescription>
    <p>
        In this example, the <code>EnableAutoRowHeight</code> property is set as <code>true</code> to auto-adjust the height of work cells based
        on the number of appointments present in the same time ranges. Also, this functionality is applicable only on
        all the timeline views as well as on the calendar month view. When this option is disabled, the height of the work
        cells remains static and at the time of exceeding appointments count, the <b>+n more</b> text indicator
        will be shown at the bottom of the cells.
    </p>
</ActionDescription>

<div class="col-lg-9 control-section">
    <div class="content-wrapper">
        <SfSchedule TValue="ScheduleData.RoomData" Width="100%" Height="650px" @bind-CurrentView="@CurrentView" @bind-SelectedDate="@SelectedDate" EnableAutoRowHeight="@AdaptiveRow">
            <ScheduleViews>
                <ScheduleView Option="View.TimelineDay"></ScheduleView>
                <ScheduleView Option="View.TimelineWeek"></ScheduleView>
            </ScheduleViews>
            <ScheduleGroup EnableCompactView="false" Resources="@GroupData"></ScheduleGroup>
            <ScheduleResources>
                <ScheduleResource TItem="RoomsData" TValue="int[]" DataSource="@ResourceData" Field="RoomId" Title="Room Type" Name="MeetingRoom" TextField="Name" IdField="Id" ColorField="Color" AllowMultiple="true"></ScheduleResource>
            </ScheduleResources>
            <ScheduleEventSettings DataSource="@DataSource">
                <ScheduleField>
                    <FieldSubject Title="Summary" Name="Subject"></FieldSubject>
                    <FieldLocation Title="Location" Name="Location"></FieldLocation>
                    <FieldDescription Title="Comments" Name="Description"></FieldDescription>
                    <FieldStartTime Title="From" Name="StartTime"></FieldStartTime>
                    <FieldEndTime Title="To" Name="EndTime"></FieldEndTime>
                </ScheduleField>
            </ScheduleEventSettings>
        </SfSchedule>
    </div>
</div>
<div class="col-lg-3 property-section">
    <div class="property-panel-header">Properties</div>
    <div class="property-panel-content">
        <table id='property' title='Properties' class='property-panel-table' style="width: 100%;">
            <tbody>
                <tr style="height: 50%">
                    <td style="width: 100%">
                        <SfCheckBox @bind-Checked="@AdaptiveRow" Label="Auto Row Height"></SfCheckBox>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
@code{
    DateTime SelectedDate = new DateTime(2020, 1, 1);
    View CurrentView = View.TimelineWeek;
    public bool AdaptiveRow = true;
    public List<ScheduleData.RoomData> DataSource = new ScheduleData().GetRoomData();
    public string[] GroupData = new string[] { "MeetingRoom" };
    private List<RoomsData> ResourceData { get; set; } = new List<RoomsData> {
    new RoomsData { Name = "Room A", Id = 1, Color = "#98AFC7" },
    new RoomsData { Name = "Room B", Id = 2, Color = "#99c68e" },
    new RoomsData { Name = "Room C", Id = 3, Color = "#C2B280" },
    new RoomsData { Name = "Room D", Id = 4, Color = "#3090C7" },
    new RoomsData { Name = "Room E", Id = 5, Color = "#95b9" },
    new RoomsData { Name = "Room F", Id = 6, Color = "#95b9c7" },
    new RoomsData { Name = "Room G", Id = 7, Color = "#deb887" },
    new RoomsData { Name = "Room H", Id = 8, Color = "#3090C7" },
    new RoomsData { Name = "Room I", Id = 9, Color = "#98AFC7" },
    new RoomsData { Name = "Room J", Id = 10, Color = "#778899" }
    };
    public class RoomsData
    {
        public string Name { get; set; }
        public string Color { get; set; }
        public int Id { get; set; }
    }
}

<style>
    .e-schedule .e-timeline-view .e-resource-left-td {
        width: 120px;
    }

    .e-schedule .e-timeline-view .e-resource-text {
        padding-left: 20px;
    }
</style>
